<!-- 提取保证金 -->
<template>

  <div class="pag" >
    <div class="bond-banner">
      <h4>我的租用令牌保证金</h4>
      <p>{{ tokenInfo.depositCvnt }}CVNT</p>
    </div>
    <div class="bond-main">
      <div class="bond-tip" v-if="rentNum">您尚有<i>{{rentNum}}</i>块令牌在租借中需要预留<i>{{unavailableDepositCvnt}}CVNT</i>保证金以确保租借协议正常运行</div>
      <div class="bond-input">
        <input type="number" v-model="inputNum" placeholder="输入提取保证金的数量">
        <label>CVNT</label>
      </div>
      <div class="wallet-tip">
        <div>保证金可提取<span>{{ getValue }}CVNT</span></div>
        <a @click="inputNum=getValue">全部</a>
      </div>
      <div class="cn-btn" @click="submit">确定</div>
      <div class="bond-tip2">保证金在租借完成之后可以随意提取</div>
    </div>
    <div class="bond-list" ref="bondList">
      <div class="bond-list-head">保证金明细</div>
      <div class="bond-list-body">
        <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll">
        <div class="bond-item" v-for="item in list">
          <span>{{ item.createTime }}</span>
          <label :class="{red: item.cvnt < 0,green:item.cvnt > 0}">{{ item.cvnt }}CVNT</label>
        </div>
        </cube-scroll>
      </div>
    </div>
    <payment ref="payment" @verifySuc="onVerifySuc" :setTimeout="false"></payment>
  </div>

</template>

<script>

    import { depositInfo, tokenPledging, tokenDraw, depositList } from 'api'
    import payment from 'cpnts/payment.vue'
  export default {
      components: {
          'payment': payment
      },
    data() {
      return {
          options: {
              pullUpLoad: true
          },
          unavailableDepositCvnt: 0,
          requiredDepositCvnt: 0,
          availableCvnt: 0,
        inputNum: null,
          list: []
      }
    },
      computed: {
        getValue(){
            let {tokenInfo, unavailableDepositCvnt} = this
            let rv = tokenInfo.depositCvnt - unavailableDepositCvnt
          return rv < 0 ? 0 : rv
        },
          rentNum(){
              let {rentNum} = this.tokenInfo
              return rentNum.idleNum + rentNum.miningNum
          },
          tokenInfo(){
              return  this.$store.state.tokenInfo
          }
      },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
          vm.resetData()
        vm.depositInfo()
            .then(()=>{
              vm.$nextTick(()=>{
                  let el = vm.$refs.bondList
                  let react  = el.getBoundingClientRect()
                  el.style.height = (app.offsetHeight - react.top) + 'px'
                  vm.$refs['scroll'].forceUpdate()
              })
            })
        vm.getData()
          // setTimeout(()=>{
          //     vm.$refs['scroll'].forceUpdate()
          // }, 3000)

      })
    },
    methods: {
        onVerifySuc(data){
            this.$refs.payment.hide()
            this.verifyToken = data.u
            this.tokenDraw()
        },
        resetData(){
            this.inputNum = null
            this.availableCvnt = 0
            this.requiredDepositCvnt = 0
            this.unavailableDepositCvnt = 0
        },
        validForm(){
            let {inputNum} = this
            if(!inputNum){
                this.$warn('请填写需要添加的保证金')
                return false
            }
            let num = +inputNum
            if(num < 1){
                this.$warn('保证金不足')
                return false
            }
            if(num > this.getValue){
                this.$warn('保证金超过限额')
                return false
            }
            return  true
        },
        async depositInfo(){
            try {
                let {data} = await depositInfo({})
                Object.assign(this, data)
            } catch (e) {
                this.toastTip(e.info)
            }
        },
        async onPullup() {
            let me = this
            let sc = this.$refs['scroll']
            if (me['list'].length < 20) {
                return this.getData()
            }

            let pagec = Math.floor((this.list.length - 20) / 20) + 1
            let pagey = (this.list.length - 20) % 20
            try {
                let {data} = await depositList({
                    per: 20,
                    page: 1 + pagec
                })
                if (!data) {
                    sc.forceUpdate()
                    return
                }
                if (pagey) {
                    data.splice(0, pagey)
                }
                me['list'] = me['list'].concat(data)
                if (!data.length) {
                    sc.forceUpdate()
                } else {
                    this.$nextTick(() => {
                        sc.forceUpdate(true)
                    })
                }
            } catch (e) {
                me.toastTip(e.info)
                sc.forceUpdate()
            }


        },
        async getData() {
            let sc = this.$refs['scroll']
            let me = this
            try {
                let {data} = await depositList({
                    per: 20,
                    page: 1
                })
                if (!data) {
                    sc.forceUpdate()
                    return
                }
                this['list'] = data
                this.$nextTick(() => {
                    sc.forceUpdate(true)
                })
                //this.toastTip(e.info)
            } catch (e) {
                me.toastTip(e.info)
                sc.forceUpdate()
            }
        },
        async submit(){
          if(!this.validForm()){
              return
          }
            this.$refs.payment.show()
        },
        async tokenDraw(){
            let me = this
            try {
                let data = await tokenDraw({
                    u: this.verifyToken,
                    source: 5,
                    cvnt: this.inputNum
                })
                this.$store.dispatch('getTokenInfo')
                this.getData()
                this.depositInfo()
                this.inputNum = null
                //this.$warn('提交成功!')
                this.toastTip(data.info)
            } catch (e) {
                me.toastTip(e.info)
            }
        },
      toastTip (info) {
        this.$warn(info)
      },
    }
  }
</script>

<style lang="scss" scoped>

  .pag {
    background: #F5F5FB;
    height: 100%;
    //overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .bond-banner {
    //width:690px;
    min-height: 216px;
    height:216px;
    background: url("~assets/images/token/logo2.png") 30px center/134px 162px no-repeat ,linear-gradient(180deg,rgba(54,77,186,1) 0%,rgba(73,111,201,1) 100%);
    border-radius:10px 10px 0px 0px;
    margin: 30px 30px 0 30px ;
    font-size:32px;
    font-weight:600;
    color:rgba(255,255,255,1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 192px;
    h4 {
      margin-bottom: 40px;
    }
  }

  .bond-main {
    background: #fff;
    padding: 30px 0;
    margin-bottom: 30px;
  }

  .bond-tip {
    width: 623px;
    font-size:26px;
    color:#71768C;
    text-align: center;
    margin: 0 auto 29px auto;
    line-height: 39px;
    i {
      color: #FD5454;
      font-style: normal;
      padding: 0 5px;
    }
  }

  .bond-tip2 {
    text-align: center;
    margin-top: 19px;
    font-size:26px;
    color:rgba(113,118,140,1);
  }

  .bond-input {
    //width:690px;
    min-height: 84px;
    height:84px;
    background:rgba(246,247,248,1);
    border:2px solid rgba(227,227,227,1);
    border-radius:8px;
    margin: 0 30px;
    position: relative;
    input {
      background: transparent;
      border: 0;
      height: 100%;
      width: 100%;
      display: block;
      font-size:30px;
      color:rgba(20,59,145,1);
      text-align: center;
      &::-webkit-input-placeholder{
        color: #B7C3D1;
      }
    }
    label {
      font-size:30px;
      font-weight:600;
      color:rgba(32,44,91,1);
      position: absolute;
      right: 23px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .wallet-tip {
    font-size:26px;
    font-weight:600;
    color:rgba(113,118,140,1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0;
    padding: 0 54px 0 30px;
    span {
      font-size:26px;
      font-weight:600;
      color:rgba(32,44,91,1);
      margin-left: 22px;
    }
    a {
      font-size:26px;
      color:rgba(18,83,252,1);
    }
  }

  .cn-btn {
    //width:690px;
    min-height: 84px;
    height:84px;
    background:rgba(23,62,143,1);
    border-radius:8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:34px;
    color:rgba(255,255,255,1);
    margin: 0 30px;
  }

  .bond-list {
    flex: 1;
    padding: 0 29px 52px 29px;
    //width:690px;
    height: auto;
    background:rgba(255,255,255,1);
    border-radius:14px;
    margin: 0 30px 0 30px;
  }

  .bond-list-head {
    //position: sticky;
    //position: -webkit-sticky;
    //top: -1px;
    height: 85px;
    font-size:34px;
    color:rgba(32,44,91,1);
    border-bottom: 2px solid #F4F4F4;
    display: flex;
    align-items: center;
    background: #fff;
    &:before {
      content: '';
      width:6px;
      height:36px;
      background:rgba(43,117,243,1);
      margin-right: 14px;
    }
  }

  .bond-list-body {
    height: calc(100% - 85px);
  }

  .bond-item {
    margin-top: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:26px;
    color:rgba(113,118,140,1);
    label {
      &.red {
        color: #DC0630;
      }
      &.green {
        color: #00A989;
        &:before {
          content: '+';
          display: inline;
        }
      }
    }
  }



</style>













